<template>
	<div class="addAddress_page layer">
		<van-nav-bar :title="$t('newAddress') || $t('editAddress')" left-arrow @click-left="$router.go(-1)"
			:border="false" />
		<div class="cont_page">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" hide-required-asterisk label-width="0"
				class="demo-ruleForm">
				<el-form-item prop="currency_id">
					<van-cell :title="$t('home.selectCurrency')" :label="activeCoin.name || $t('pleaseSelectCurrency')" is-link
						:border="false" @click="hasTokens = !hasTokens" />
				</el-form-item>
				<el-form-item prop="address">
					<van-cell :title="$t('home.transferAddress')" :border="false">
						<el-input v-model="ruleForm.address" :placeholder="$t('home.address')" slot="label">
						</el-input>
					</van-cell>
				</el-form-item>
				<el-form-item prop="network_id">
					<van-cell :title="$t('home.selectNetwork')" :label="activeNetwork.name || $t('pleaseSelectNetwork')" is-link
						:border="false"
						@click="activeCoin && activeCoin.id ? hasNetwork = !hasNetwork : $toast($t('pleaseSelectCurrency'))" />
				</el-form-item>
				<el-form-item prop="tag">
					<van-cell :title="$t('notes')" :border="false">
						<el-input v-model="ruleForm.tag" :placeholder="$t('home.pleaseNotes')" slot="label">
						</el-input>
					</van-cell>
				</el-form-item>
			</el-form>
			<el-button class="submit_but" @click="submit">{{$t('save')}}</el-button>
		</div>
		<SelectNetwork v-if="hasNetwork" v-model="hasNetwork" :coinId="activeNetwork.network_id" :network="activeCoin.protocol"
			@change="changeNetwork" />
		<ChooseTokens v-if="hasTokens" v-model="hasTokens" @change="changeTokens" />
	</div>
</template>

<script>
	import SelectNetwork from './components/selectNetwork.vue'
	import ChooseTokens from './components/chooseTokens.vue'
	import {
		userAddAddress,
	} from '@/api/my.js'
	export default {
		components: {
			SelectNetwork,
			ChooseTokens
		},
		data() {
			return {
				hasNetwork: false,
				hasTokens: false,
				activeCoin: {},
				activeNetwork: {},
				ruleForm: {
					currency_id: '',
					network_id: '',
					address: '',
					tag: '',
				},
			}
		},
		computed: {
			rules() {
				let obj = {
					address: [{
						required: true,
						message: this.$t('home.address'),
						trigger: 'change'
					}],
					currency_id: [{
						required: true,
						message: this.$t('pleaseSelectCurrency'),
						trigger: 'change'
					}],
					network_id: [{
						required: true,
						message: this.$t('pleaseSelectNetwork'),
						trigger: 'change'
					}],
				}
				return obj
			}
		},
		watch: {},
		mounted() {},
		methods: {
			changeNetwork(item) {
				// console.log('changeNetwork', item);
				this.activeNetwork = item
				this.ruleForm.network_id = item.network_id
			},
			changeTokens(item) {
				// console.log('changeTokens', item);
				this.activeCoin = item
				this.ruleForm.currency_id = item.id
				this.activeNetwork = item.protocol[0]
				this.ruleForm.network_id = this.activeNetwork.network_id
			},
			async submit() {
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						const res = await userAddAddress(this.ruleForm)
						if (res && res.code == 1) {
							this.$toast.success(res.msg)
							this.$router.go(-1)
						} else {
							this.$toast.fail(res.msg)
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style scoped lang="less">
	.addAddress_page {
		::v-deep .el-form-item {
			margin-bottom: 20px;
		}

		.van-cell {
			background-color: #3D3D3D;
			border-radius: 16px;
			padding: 13px 20px;
			align-items: flex-end;
			// margin-bottom: 20px;

			&::after {
				// border-bottom: none;
			}

			::v-deep .van-cell__title {
				text-align: left;
				color: #fff;

				.van-cell__label {
					font-size: 14px;
					color: #fff;
				}
			}

			::v-deep .el-input__inner {
				height: 22px;
				line-height: 22px;
				background-color: transparent;
				padding: 0;
				border: 0;
				color: #fff;

				&::placeholder {
					color: #999;
				}
			}

			::v-deep .el-input__suffix {
				line-height: 22px;
				color: #999;
			}

			.address {
				width: 22px;
				height: 22px;
			}
		}
	}
</style>